import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { SaveOutlined } from '@ant-design/icons'
import { withI18n } from '@lingui/react'
import { Card, Form, Input, Button, message } from 'antd'
import { tailLayout, formItemLayout } from '@/utils/helper'
import styles from './index.less'
import '@/utils/index.less'
import { get, post, put } from '@/services/https'
import { NAME, USERPWD } from '@/utils/regExp'
const { TextArea } = Input
// 1超级管理员 2系统管理员 3审计管理员 4安全管理员
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class userDer extends React.Component {
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    initialValues: {
      ops_desc: '',
    },
  }
  formRef = React.createRef()
  componentDidMount() {
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      this.getData(this.props.match.params.id)
    } else {
    }
    this.setState({ accessibility: sessionStorage.getItem('accessibility') })
  }
  getData = (id) => {
    get('ops/read?id=' + id).then((res) => {
      let initialValues = res.data
      initialValues.passwd = initialValues.login_password
      this.formRef.current.setFieldsValue(initialValues)
    })
  }
  handleSaveBtn = (values) => {
    const { location, i18n } = this.props
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      values.id = this.props.match.params.id * 1
      delete values.passwd
      post('ops/update', values).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`Modify`)
          this.props.history.push('/SystemM/userName')
        } else {
          message.error(res.info)
        }
      })
    } else {
      delete values.passwd
      let data = {
        ...values,
      }
      post('ops/create', data).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`The`)
          this.props.history.push('/SystemM/userName')
        } else {
          message.error(res.info)
        }
      })
    }
  }
  clFna = () => {
    this.props.history.push('/SystemM/userName')
  }
  render() {
    const { location, i18n } = this.props
    const { initialValues } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    return (
      <div>
        <Form {...formItemLayout} {...formProps}>
          <Card title={i18n.t`Account-Basic`} className={styles.Po_bt}>
            <Form.Item
              label="登录名称"
              name="login_name"
              rules={[
                {
                  required: true,
                },
                {
                  pattern: NAME,
                  message: i18n.t`Only`,
                },
              ]}
            >
              <Input className="Ip_60" />
            </Form.Item>
            <Form.Item
              label="登录密码"
              name="login_password"
              extra={i18n.t`Account-password_dest`}
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
                {
                  pattern: USERPWD,
                  message: i18n.t`Account-password_dest`,
                },
              ]}
            >
              <Input.Password className="Ip_60" />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="passwd"
              extra={i18n.t`Account-password_dest`}
              dependencies={['login_password']}
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
                {
                  pattern: USERPWD,
                  message: i18n.t`Account-password_dest`,
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('login_password') === value) {
                      return Promise.resolve()
                    }
                    return Promise.reject(
                      new Error('密码输入不一致，重新输入!')
                    )
                  },
                }),
              ]}
            >
              <Input.Password className="Ip_60" />
            </Form.Item>
            <Form.Item label={i18n.t`Account-describe`} name="ops_desc">
              <TextArea className="Ip_60" />
            </Form.Item>
          </Card>
          <Form.Item {...tailLayout}>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button
                type="primary"
                className={styles.Po_Le}
                htmlType="submit"
                icon={<SaveOutlined />}
              >
                {i18n.t`Baocun`}
              </Button>
              <Button onClick={this.clFna}>{i18n.t`clFna`}</Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
userDer.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default userDer
